<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box{
				width: 300px;
				height: 500px;
				border: 4px solid green;
				/* step2:绑定动画
				 animation: 动画名称 持续时间 次数
				 Infinite：无限的
				 linear:匀速
				 ;*/
				animation: sf 2s infinite linear;
			}
			/* step 1:创建关键帧 */
			@keyframes sf{
				/* from{  开始帧 */
					0%,30%{width: 300px;
					height: 300px;
					background-color: pink;
					transform: rotate(0deg);}
					40%,70%{
						width: 75rem;
						height: 400px;
						background-color: aqua;
						transform: translate(200px,300px) rotate(180deg);
					}
					80%,100%{
						width: 400px;
						height: 25rem;
						background-color: burlywood;
						transform: rotate(240deg);
						border-radius: 200px;
					}
					
				/* }
				to{/* 结束帧 */
					width: 1200px;
					height: 500px;
					background-color: aqua;
					transform: translate(200px,300px) rotate(180deg);
				}
			}
		</style>
	</head>
	<body>
	<div class="box"></div>	
	</body>
</html>
